<template>
	<view class="main">
		<view class="box">
			<view style="display: flex;align-items: center;">
				<view style="width: 100px;">登录名</view>
				<view class="iteam">{{userinfo.tbUser.username}}</view>
			</view>
			<view style="display: flex;align-items: center;">
				<view style="width: 100px;">原密码</view>
				<input class="iteam" v-model="userPwd.oldpwd" type="password" placeholder="填写原密码" />
			</view>
			<view style="display: flex;align-items: center;">
				<view style="width: 100px;">新密码</view>
				<input class="iteam" v-model="userPwd.newpwd" type="password" placeholder="填写新密码" />
			</view>
		</view>
		<view class="button" @click="saveUserPwd">保存</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import api from '../../../script/api.js'
	import tools from '../../../script/tools.js'
	import {
		userinfoStore
	} from '../../../store/index.js'
	import {
		storeToRefs
	} from 'pinia'

	const {
		updateUserInfo,
		queryUserInfo
	} = userinfoStore()
	const {
		islogin,
		userinfo,
	} = storeToRefs(userinfoStore())

	const userPwd = ref({
		oldpwd: '',
		newpwd: ''
	})
	const saveUserPwd = () => {
		api.patch('/user/password', userPwd.value, (resp) => {
			if (resp.success) {
				uni.showToast({
					title: '密码修改成功'
				})
				userPwd.value.oldpwd = ''
				userPwd.value.newpwd = ''
				uni.navigateTo({
					url: '/pages/my/drawer/security'
				})
			} else {
				uni.showToast({
					title: resp.message,
					icon: 'error'
				})
			}

		})
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 10px;
		min-height: 100vh;
		height: 100%;
		box-sizing: border-box;
		background-color: #f8f8f8;
	}

	.box {
		margin: 10px;
		padding: 10px;
	}

	.iteam {
		width: 100%;
		padding: 10px;
		border-bottom: 0.5px solid #dcdcdc;

		&:hover:not(:first-child) {
			border-bottom: 0.5px solid #1890ff;
		}
	}

	.button {
		margin: 30px 10px;
		padding: 15px;
		text-align: center;
		border-radius: 5px;
		color: #fff;
		background-color: #1890ff;
	}
</style>